<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="common/commonStatic::commonStaticHeader"></div>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
    <!--    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">-->
    <!--        <el-radio-button :label="false">展开</el-radio-button>-->
    <!--        <el-radio-button :label="true">收起</el-radio-button>-->
    <!--    </el-radio-group>-->
    <el-row>
        <el-col :span="24">

        </el-col>
    </el-row>
    <el-row>
        <el-col :span="4">
            <div style="position: absolute;top:0;left:0;bottom:0;height:100%;background: #909399;">
                <!--            <el-image style="width: 100px; height: 100px" th:src="@{/img/cat.jpg}" fit="contain"></el-image>-->
                <el-menu @open="handleOpen" @close="handleClose" background-color="#409EFF" text-color="#ffffff"
                         active-text-color="#ffffff">
                    <el-submenu v-for="(item,index) in menu" :key="index">
                        <template slot="title">
                            <i :class="item.menuIcon"></i>
                            <span>{{item.menuName}}</span>
                        </template>
                        <el-menu-item v-for="(item1,index1) in item.child" :key="index1">
                            <template slot="title">
                                <i :class="item1.subMenuIconClass"></i>
                                <span>{{item1.subMenuName}}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </div>
        </el-col>
        <el-col :span="20" style="height: 100px;background: #000000;border-left: 1px solid #ffffff;"></el-col>
    </el-row>
</div>
</body>
<script>
    new Vue({
        el: '.container',
        data: {
            menu: []
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            async getMenu() {
                let result = await httpGet("/menu/getMenu");
                if (result.code == 200) {
                    this.menu = result.data;
                }
            }
        },
        mounted() {
            this.getMenu();
        }
    })
</script>
</html>